<template>
  <div>
    <!-- 顶部筛选条件-->
    <el-form :model="filterData">
      <el-row :gutter="20">
        <el-col style="width: 120px;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="PopupAddDialog">新增账套企业</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="企业名称" label-width="80px">
            <el-input v-model="filterData.name" placeholder="请输入企业关键字" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-button type="primary" icon="el-icon-search" @click="loadDataList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div style="height: 2px; border-bottom: 1px solid #E9E9E9;"></div>

    <!--添加供应商-->
    <PopupNew ref="popupnew" v-if="addDialogVisible" @closeHandler="curpage=1;loadDataList()"></PopupNew>
    <PopupEdit ref="popupedit" v-if="editDialogVisible" @closeHandler="handleeditcomplete"></PopupEdit>

    <!--结算账号-->
    <checkoutUI   ref="checkoutUI" v-if="checkoutVisible"></checkoutUI>


    <!--数据表格-->
    <el-table :data="tableData" border style="min-height: calc(100vh - 200px)">
      <el-table-column prop="id" label="id" v-if="false"></el-table-column>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column label="状态" align="center" width="60">
        <template v-slot="scope">
          <span style="background-color:#00bc00;color:#FFFFFF;padding: 2px 5px;" v-if="scope.row.enabled=='1'">启用</span>
          <span style="background-color:#cbcbcb;color:#6d6d6d;padding: 2px 5px;" v-if="scope.row.enabled=='0'">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="企业性质" align="center" width="100">
        <template v-slot="scope">
          <span v-if="scope.row.type==1">一般纳税人</span>
          <span v-if="scope.row.type==2">小规模</span>
          <span v-if="scope.row.type==3">个体户</span>
          <span v-if="scope.row.type==4">自然人</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="企业名称" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="legalman" label="法人" align="center" width="80"></el-table-column>
      <el-table-column prop="telephone" label="电话" align="center" width="120"></el-table-column>
      <el-table-column prop="address" label="注册地址" align="left" show-overflow-tooltip></el-table-column>

      <el-table-column prop="jdrate" label="京东点位" align="center" width="100">
        <template v-slot="scope">{{scope.row.jdrate}}%</template>
      </el-table-column>
      <el-table-column prop="jwrate" label="自采点位" align="center" width="100">
        <template v-slot="scope">{{scope.row.jwrate}}%</template>
      </el-table-column>
      <el-table-column prop="zcrate" label="政采云点位" align="center" width="100">
        <template v-slot="scope">{{scope.row.zcrate}}%</template>
      </el-table-column>
      <el-table-column prop="zcrate" label="企业点位" align="center" width="100">
        <template v-slot="scope">{{scope.row.qyrate}}%</template>
      </el-table-column>
      <el-table-column prop="ratememo" label="点位说明" show-overflow-tooltip></el-table-column>
      <el-table-column prop="memo" label="备注" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="操作" align="center" width="140">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="mini" circle @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit-outline"
              title="编辑企业信息"></el-button>
            <el-button size="mini" circle type="danger" @click="handleDelete(scope.$index, scope.row)" title="删除"
              icon="el-icon-delete"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px; text-align: right;">
      <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
        layout=" prev, pager, next,sizes,total" :page-sizes="[15, 25, 35]" :total="total" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>

  </div>
</template>

<script>
  import PopupNew from './New.vue';
  import PopupEdit from './edit.vue';
  export default {
    components: {
      PopupNew,
      PopupEdit,
    },
    data() {
      return {
        //分页相关
        curpage: 1,
        pagesize: 15,
        total: 1,
        filterData: {
          name: '',
          bmname: ''
        },
        tableData: [],
        currentEditIndex: -1,
        addDialogVisible: false,
        editDialogVisible: false,
        checkoutVisible: false,
        userMgrVisible: false
      }
    },
    mounted() {
      this.loadDataList();
    },
    methods: {
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      loadDataList: function() {
        let params = {
          name: this.filterData.name,
          curpage: this.curpage,
          pagesize: this.pagesize
        };
        this.axios.post("api/admin/account/list", params).then((res) => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
            this.total = parseInt(res.data.total);
            this.curpage = parseInt(res.data.curpage);
            this.pagesize = parseInt(res.data.pagesize);
          }
        });
      },
      handleEdit(index, row) {
        this.currentEditIndex = index;
        this.editDialogVisible = true;
        this.$nextTick(() => {
          this.$refs["popupedit"].initData(index, JSON.parse(JSON.stringify(row)));
          this.$refs["popupedit"].dialogVisible = true;
        })

      },
      handleeditcomplete: function(index, data) {
        this.loadDataList();
      },

      handleDelete(index, row) {
        this.$confirm("确定要删除此当前账套企业吗？ ", "确认", {
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: 'error'
        }).then(() => {
          this.axios.post("/api/admin/account/remove", {
            id: row.id,
          }).then(res => {

            if (res.status == 200 && res.data.code == 0) {
              this.$message.success({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
              this.loadDataList();
            } else {
              this.$message.error({
                message: res.data.msg,
                duration: 1500,
                showClose: true
              });
            }
          })
        })
      },
      PopupAddDialog: function() {
        this.addDialogVisible = true;
        this.$nextTick(() => {
          this.$refs["popupnew"].dialogVisible = true;
          this.$refs["popupnew"].init();
        })
      },
    }
  }
</script>

<style>
</style>
